<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WK科技</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <meta name="description" content="致力于打造最大的芯片平台" />
    <meta name="keywords" content="芯片，半导体，集成电路" />
    <link rel="stylesheet" href="./iconfont/iconfont.css" />
    <link rel="stylesheet" href="./iconfont2/iconfont.css" />
    <link
      href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.2/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="./gl.css" />
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      i,
      em {
        font-style: normal;
      }
      ul,
      li {
        list-style: none;
      }
      body {
        background-color: #dadbf8;
      }
      .main {
        display: flex;
        position: absolute;
        top: 16px;
        left: 15px;
        width: 97vw;
        height: 95vh;
        background-color: #fafafc;
        border-radius: 20px;
        overflow: hidden;
      }
      .tab {
        height: 100%;
        width: 15vw;
        background-color: #fafafc;
      }
      .right {
        flex: 1;
        display: flex;
        flex-direction: column;
      }
      .header {
        width: 100%;
        height: 7vh;
        line-height: 7vh;
        background-color: #fafafc;
        border-bottom: 1px solid #fff;
      }
      .header i {
        font-size: 1.6vw;
        margin-left: 1.1vw;
        cursor: pointer;
      }
      .header i:nth-child(2) {
        margin-left: 70vw;
      }
      .big-content {
        position: relative;
        overflow: auto;
        display: flex;
        flex: 1;
        width: 100%;
        background-color: #f2f2f8;
      }
      .content {
        flex: 1;
      }
      .scroll {
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: 1.1vw;
        background-color: #fafafc;
      }
      .logo {
        padding: 10px;
        height: 60px;
        line-height: 60px;
        margin-bottom: 20px;
        border-bottom: 1px solid #fff;
      }
      .out {
        width: 60px;
        height: 60px;
        line-height: 60px;
        overflow: hidden;
        border-radius: 50%;
      }
      .out img {
        width: 107%;
        height: 107%;
        margin-left: -2px;
        margin-top: -2px;
      }
      .chuangjian {
        position: relative;
        width: 90%;
        height: 50px;
        line-height: 50px;
        background-color: #6466e2;
        padding: 0;
        text-align: center;
        color: #fff;
        margin-bottom: 5px;
        border-radius: 10px;
        margin-left: 10px;
        cursor: pointer;
      }
      .box1 {
        display: none;
        position: absolute;
        top: 0;
        right: -130px;
        width: 130px;
        height: 170px;
        padding: 2px 5px 0;
        border-radius: 5px;
        background-color: #fff;
      }
      .box1 em {
        height: 29%;
        width: 100%;
        display: block;
        color: #fff;
        font-size: 14px;
        background-color: #9d9ee6;
      }
      .box1 i {
        display: block;
        font-size: 13px;
        margin-top: -13px;
        height: 5%;
        color: black;
      }
      .chuangjian:hover .box1 {
        z-index: 9;
        display: block;
      }
      .box1 em:hover {
        background-color: #5355c7;
      }
      .tab ul {
        width: 100%;
        height: 100%;
        padding: 10px;
      }

      .tab li {
        position: relative;
        width: 100%;
        height: 50px;
        line-height: 50px;
        margin-bottom: 3px;
        border-radius: 10px;
        padding-left: 20px;
        cursor: pointer;
        font-size: 1.1vw;
        overflow: hidden;
      }
      .tab li div {
        width: 100%;
        height: 4vh;
        line-height: 4vh;
        font-size: 14px;
        margin-left: -0.8vw;
        margin-bottom: 4px;
        border-radius: 10px;
        padding-left: 1.7vw;
        background-color: #5355c7;
      }
      .tab li:hover {
        color: #fff;
        background-color: #5355c7;
      }
      .tab li i {
        margin-right: 0.9vh;
      }
      .xialakuang,
      .xialakuang2,
      .xialakuang3,
      .xialakuang4,
      .xialakuang5 {
        display: block;
        height: 2.7vw;
        font-size: 1vw;
        padding-left: 4vw;
        border-radius: 5px;
        width: 70%;
        cursor: pointer;
        color: #6466e2;
      }
      .xialakuang:hover,
      .xialakuang2:hover,
      .xialakuang3:hover,
      .xialakuang4:hover,
      .xialakuang5:hover {
        color: #16186d;
      }
      .color {
        background-color: #5355c7;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div class="main">
      <!--左边导航栏 -->
      <div class="tab">
        <div class="logo">
          <div class="out">
            <img src="./images/logo4.png" alt="" />
          </div>
        </div>
        <div class="chuangjian">
          创建项目
          <i class="iconfont icon-jia"></i>
        </div>
        <div class="gainian1 xialakuang4 la" style="display: none">
          项目概念
        </div>
        <div class="renwu1 xialakuang4 la" style="display: none">任务列表</div>
        <div class="chuangjian1 xialakuang4 la" style="display: none">
          创建任务
        </div>
        <ul>
          <li class="pan"><i class="iconfont icon-yibiaopan"></i>仪表盘</li>
          <li class="item">
            <i class="iconfont icon-shuxie"></i>
            我的项目
            <i class="xiala xialaone iconfont icon-jiantou_liebiaozhankai"></i>
          </li>
          <div class="yy_liebiao xialakuang kapian la" style="display: none">
            项目
          </div>
          <div class="liebiao xialakuang kapian la" style="display: none">
            列表显示
          </div>
          <div class="renwu2 xialakuang la" style="display: none">任务管理</div>
          <div class="wenjian2 xialakuang la" style="display: none">
            文件管理
          </div>
          <div class="gainian2 xialakuang la" style="display: none">
            概念动态
          </div>
          <div class="tongji xialakuang la" style="display: none">统计</div>
          <li class="renwu">
            <i class="iconfont icon-renwu"></i>我的任务
            <i class="xiala xialaone iconfont icon-jiantou_liebiaozhankai"></i>
          </li>
          <div class="yy_renwu xialakuang5 la" style="display: none">
            任务
          </div>
          <div class="bianji xialakuang5 la" style="display: none">
            编辑任务
          </div>
          <li class="baobiao">
            <i class="iconfont icon-baobiao"></i>报表管理
            <i class="xiala iconfont icon-jiantou_liebiaozhankai"></i>
          </li>
          <div class="yy_baobiao xialakuang2 la" style="display: none">报表</div>
          
          <div class="fenbu xialakuang2 la" style="display: none">任务分布</div>
          <div class="jinzhan xialakuang2 la" style="display: none">
            任务进展
          </div>
          <li class="xitong">
            <i class="iconfont icon-xitongshezhi"></i>系统设置
            <i class="xiala iconfont icon-jiantou_liebiaozhankai"></i>
          </li>
          <div class="xiaoxi xialakuang3 la" style="display: none">
            消息管理
          </div>
          <div class="rizhi xialakuang3 la" style="display: none">系统设置</div>
        </ul>
      </div>
      <!-- 右边大版块-->
      <div class="right">
        <div class="header">
          <i class="iconfont icon-liebiao2"></i>
          <i class="iconfont icon-Magnifier"></i>
          <i class="iconfont icon-xiaoxi"></i>
        </div>
        <div class="big-content">
          <!--------------------内容写在这里---- -->
          <div class="content">
            <div class="messageTop">
              <div>
                <img src="./images/头像2.png" alt="" />
                <span>guoguo</span>
              </div>
              <div>
                <img src="./images/头像3.jpeg" alt="" class="img1" />
                <span>边角料</span>
              </div>
              <div>
                <img src="./images/头像1.jpeg" alt="" class="img1" />
                <span>你王哥</span>
              </div>
              <div>
                <img src="./images/头像4.png" alt="" class="img1" />
                <span>hfshfhs</span>
              </div>
              <div class="she iconfont icon-xitongshezhi">
                <span>设置状态</span>
              </div>
              <div class="she ren iconfont icon-ziyuan53">
                <span>添加联系</span>
              </div>
            </div>
            <!--下边消息框 -->
            <div class="messageB">
              <!--  -->
              <div class="listg"></div>
              <!--  -->
            </div>
            <!-- modal -->
            <form action="" class="formgl">
              <div
                class="modal fade"
                id="exampleModal"
                tabindex="-1"
                aria-labelledby="exampleModalLabel"
                aria-hidden="true"
              >
                <div class="modal-dialog">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h1 class="modal-title fs-5" id="exampleModalLabel">
                        添加联系
                      </h1>
                      <button
                        type="button"
                        class="btn-close"
                        data-bs-dismiss="modal"
                        aria-label="Close"
                      ></button>
                    </div>
                    <div class="modal-body">
                      <div class="mb-3">
                        <label
                          for="exampleFormControlTextarea1"
                          class="form-label"
                          >选择联系人</label
                        >
                        <input
                          name="glname"
                          type="email"
                          class="form-control"
                          id="exampleFormControlInput1"
                          placeholder="请输入名字"
                        />
                      </div>
                      <!-- / -->
                      <div class="mb-3">
                        <label
                          for="exampleFormControlTextarea1"
                          class="form-label"
                          >输入对话</label
                        >
                        <textarea
                          name="glduihua"
                          class="form-control"
                          id="exampleFormControlTextarea1"
                          rows="3"
                        ></textarea>
                      </div>
                    </div>
                    <div class="modal-footer">
                      <button
                        type="button"
                        class="no btn btn-secondary"
                        data-bs-dismiss="modal"
                      >
                        取消
                      </button>
                      <button
                        type="button"
                        class="yes btn btn-primary"
                        data-bs-dismiss="modal"
                      >
                        确认
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </form>
            <!--  -->
          </div>
          <!------------------------------------->
          <div class="scroll"></div>
        </div>
      </div>
    </div>
    <!-- ----------------------------------script------------------------------------------>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.2/js/bootstrap.min.js"></script>

    <script src="./gl.js"></script>
    <script>
      const li = document.querySelectorAll("li")
      li.forEach((el) => {
        el.addEventListener("click", function (e) {
          console.log(el)
          if (e.target.tagName !== "LI") return
          const old = document.querySelector(".color") // 有特殊样式的元素
          old && old.classList.remove("color") //没有就不清除,有就清除
          e.target.classList.add("color")
        })
      })
      const la = document.querySelectorAll(".la")
      //创建项目下拉框
      let flag4 = true
      const chuangjian = document.querySelector(".chuangjian")
      const xialakuang4 = document.querySelectorAll(".xialakuang4")
      chuangjian.onclick = function (e) {
        la.forEach((el) => {
          el.style.display = "none"
        })
        if (flag4) {
          xialakuang4.forEach((el) => {
            el.style.display = "block"
          })
          flag4 = false
        } else {
          xialakuang4.forEach((el) => {
            el.style.display = "none"
          })
          flag4 = true
        }
      }
      //项目下拉框
      let flag = true
      const item = document.querySelector(".item")
      const xialakuang = document.querySelectorAll(".xialakuang")
      item.onclick = function (e) {
        la.forEach((el) => {
          el.style.display = "none"
        })
        if (flag) {
          xialakuang.forEach((el) => {
            el.style.display = "block"
          })
          flag = false
        } else {
          xialakuang.forEach((el) => {
            el.style.display = "none"
          })
          flag = true
        }
      }
      // 我的任务
      let flag5 = true
      const renwu = document.querySelector(".renwu")
      const xialakuang5 = document.querySelectorAll(".xialakuang5")
      renwu.onclick = function (e) {
        la.forEach((el) => {
          el.style.display = "none"
        })
        if (flag5) {
          xialakuang5.forEach((el) => {
            el.style.display = "block"
          })
          flag5 = false
        } else {
          xialakuang5.forEach((el) => {
            el.style.display = "none"
          })
          flag5 = true
        }
      }
      //报表下拉框
      let flag2 = true
      const baobiao = document.querySelector(".baobiao")
      const xialakuang2 = document.querySelectorAll(".xialakuang2")
      baobiao.onclick = function (e) {
        la.forEach((el) => {
          el.style.display = "none"
        })
        if (flag2) {
          xialakuang2.forEach((el) => {
            el.style.display = "block"
          })
          flag2 = false
        } else {
          xialakuang2.forEach((el) => {
            el.style.display = "none"
          })
          flag2 = true
        }
      }
      //   系统管理下拉框
      let flag3 = true
      const xitong = document.querySelector(".xitong")
      const xialakuang3 = document.querySelectorAll(".xialakuang3")
      xitong.onclick = function (e) {
        la.forEach((el) => {
          el.style.display = "none"
        })
        if (flag3) {
          xialakuang3.forEach((el) => {
            el.style.display = "block"
          })
          flag3 = false
        } else {
          xialakuang3.forEach((el) => {
            el.style.display = "none"
          })
          flag3 = true
        }
      }
    </script>
    <script src="./dianji.js"></script>

  </body>
</html>
